import { useState } from "react"
import State_init_null from "./components/State_init_null"

type User = {
  name: string
  age: number
}

type Props = {
  className: string
  children: React.ReactNode
}

function Button(props: Props) {
  const { className, children } = props
  return <button className={className}>{children}</button>
}

function App() {
  const [value, setValue] = useState(false)
  const [list, setList] = useState([1, 2, 3])
  const changeValue = () => {
    setValue(!value)
  }
  const changeList = () => {
    setList([1, 2, 3, 4, 5])
  }
  // 限制初始值的类型必须满足User类型：User | () => User
  // const [user, setUser] = useState<User>({
  //   name: "jack",
  //   age: 19
  // })
  const [user, setUser] = useState<User>(() => {
    return {
      name: "jack",
      age: 19
    }
  })

  const changeUser = () => {
    setUser({
      name: "jone",
      age: 30
    })
  }


  return (
    <>
      <button onClick={changeValue}>Change Value</button>
      {value && <span>Hello World</span>}
      <button onClick={changeList}>Change List</button>
      {list}
      {user.name}

      <Button className="test">click me!</Button>

      <State_init_null />
    </>
  )
}

export default App
